<template>
  <div class="container">
    <el-card shadow="always" class="analysis">
      <div class="title">
        {{ $moment().subtract(1, "day").format("YYYY-MM-DD") }}综合分值分析
      </div>
      <el-row :gutter="20">
        <el-col :span="8"> <div class="main"></div> </el-col>
        <el-col :span="8"> <div class="radar"></div></el-col>
        <el-col :span="8">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="分类"> </el-table-column>
            <el-table-column prop="max" label="分值" width="60"> </el-table-column>
            <el-table-column prop="value" label="得分" width="60"> </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <template
        v-if="
          recordList.length &&
          recordList[0].chainStoreScoreItemResponseList.length
        "
      >
        <div>
          <div class="title">综合扣分明细</div>
          <rz-height></rz-height>
          <el-table
            :data="
              recordList.length &&
              recordList[0].chainStoreScoreItemResponseList
            "
            border
            style="width: 100%"
          >
            <el-table-column prop="itemTypeStr" label="分类" width="150">
            </el-table-column>
            <el-table-column prop="content" label="扣分明细">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.content | filterHtml }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="100">
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">近10天综合得分</div>
      <rz-height></rz-height>
      <div class="line"></div>
    </el-card>
    <rz-height></rz-height>
    <el-card shadow="always">
      <div class="title">近10天更新记录</div>
      <rz-height></rz-height>
      <el-table :data="recordList" border style="width: 100%" ref="table">
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <div class="table">
              <el-table
                :data="props.row.chainStoreScoreItemResponseList"
                border
                style="width: 100%"
              >
                <el-table-column prop="itemTypeStr" label="分类" width="150">
                </el-table-column>
                <el-table-column prop="content" label="扣分明细">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.content}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="score" label="扣分分值" width="100">
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="createTimeStr" label="评估时间" width="120">
        </el-table-column>
        <el-table-column prop="superviseUnitScore" label="安全状况">
        </el-table-column>
        <el-table-column prop="systemScore" label="制度管理">
        </el-table-column>
        <!-- <el-table-column prop="sopScore" label="标准化操作">
        </el-table-column> -->
        <el-table-column prop="jointConferenceScore" label="企业会议">
        </el-table-column>
        <el-table-column prop="trainingScore" label="定期培训">
        </el-table-column>
        <el-table-column prop="unitCheckResultScore" label="单位自查">
        </el-table-column>
        <el-table-column prop="selfReportScore" label="自查报告"> </el-table-column>
        <el-table-column prop="quickCheckScore" label="定期自检"> </el-table-column>
        <el-table-column prop="signScore" label="三类人签署"> </el-table-column>
        <el-table-column prop="dayScore" label="日管控完成情况"> </el-table-column>
        <el-table-column prop="weekScore" label="周排查完成情况"> </el-table-column>
        <el-table-column prop="monthScore" label="月调度完成情况"> </el-table-column>
        <!-- <el-table-column prop="purchaseScore" label="原料采购"> </el-table-column>
        <el-table-column prop="publicityScore" label="社会责任"> </el-table-column> -->
        <el-table-column prop="total" label="综合得分"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary"  @click="view(scope.row)"
              >查看</el-button> -->
            <a
              href="javascript:;"
              style="font-size: 12px; color: #1890ff"
              @click="view(scope.row)"
              v-if="scope.row.chainStoreScoreItemResponseList.length"
            >
              <span>扣分明细 </span>
              <i
                style="display: inline-block"
                class="el-icon el-icon-arrow-right"
              ></i>
            </a>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import {
  // findLastByWorkstationId,
  // findListByConditionSafety,
  findLastByWorkstationId,
  findListByConditionScore,
} from "@/api/modules/chain";

var echarts = require("echarts");
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
    this.findListByConditionSafety();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      tableData: [],
      data: {},
      recordList: [],
    };
  },
  // 方法
  methods: {
    meterInit() {
      var chartDom = document.querySelector(".main");
      var myChart = echarts.init(chartDom);
      let option = {
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.59, "#ff0000"],
                  [0.79, "#ffd700"],
                  [1, "#008000"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -35,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 30,
              fontSize: 15,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
              color: "auto",
            },
            data: [
              {
                value: this.data.total,
              },
            ],
            center: ["50%", "50%"],
            radius: "80%",
          },
        ],
      };
      myChart.setOption(option);
    },
    radarInit() {
      var chartDom = document.querySelector(".radar");
      var myChart = echarts.init(chartDom);
      let option = {
        lineStyle: {
          color: "#1890ff",
        },
        title: {
          // text: "Basic Radar Chart",
        },
        tooltip: {
          show: true,
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          //  name: {
          //   textStyle: {
          //       color: '#fff',
          //       backgroundColor: '#999',
          //       borderRadius: 3,
          //       padding: [3, 5]
          //  },
           //指示器文字换行 start
         
          // shape: 'circle',
          indicator: [


    //  "总部建立食品安全管理体系和管理制度",
    //         "定期召开食品安全相关会议",
    //         "定期开展食品安全培训",
    //         "单位门店食品安全状况",
    //         "总部落实三类人三件事",
    //         "按要求进行自查报告",
    //         "总部定期开展自检",
  //  完善管理体系、召开食安会议、定期开展培训、定期自检监测、门店食安状况、三类人三件事、开展自查报告
            { name: "完善管理体系", max: this.data.systemTotal },
            { name: "召开食安会议", max: this.data.jointConferenceTotal },
            // { name: "标准化操作", max: this.data.sopTotal },
            { name: "定期开展培训", max: this.data.trainingTotal },
            { name: "门店食安状况", max: this.data.superviseUnitTotal },
            { name: "三类人三件事", max: this.data.threeTotal },
            { name: "开展自查报告", max: this.data.selfReportTotal },
            { name: "定期自检监测", max: this.data.quickCheckTotal },
            // { name: "三类人签署", max: this.data.signTotal },
            // { name: "日管控完成情况", max: this.data.dayTotal },
            // { name: "周排查完成情况", max: this.data.weekTotal },
            // { name: "月调度完成情况", max: this.data.monthTotal },
            // { name: "原料采购", max: this.data.purchaseTotal },
            // { name: "社会责任", max: this.data.publicityTotal },
          ],
          axisName: {
            // formatter: '【{value}】',
            color: "#1890ff",
           formatter: function(text){
                var strlength = text.length;
                if(strlength % 6 != 0){
                    text = text.replace(/\S{6}/g,function(match){
                        return match + '\n'
                    })
                }else{
                    text = text.replace(/\S{6}/g,function(match){
                        return match + '\n'
                    });
                    strlength = text.length;
                    text = text.substring(0,strlength - 1);
                }
                return text
            }
            //指示器文字换行 end
          },
          splitArea: {
            areaStyle: {
              // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 10,
            },
          },
        },
        series: [
          {
            name: "分值",
            type: "radar",
            data: [
              {
                value: [
                  this.data.systemScore,
                  this.data.jointConferenceScore,
                  // this.data.sopScore,
                  this.data.trainingScore,
                  this.data.superviseUnitScore,
                  this.data.threeScore,
                  this.data.selfReportScore,
                  this.data.quickCheckScore,
                  // this.data.quickCheckScore,
                  // this.data.signScore,
                  // this.data.dayScore,
                  // this.data.weekScore,
                  // this.data.monthScore,
                  
                  // this.data.purchaseScore,
                  // this.data.publicityScore,
                ],
                itemStyle: {
                  normal: {
                    color: "#1890ff",
                    //  opacity: 0
                  },
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    lineInit() {
      let chartDom = document.querySelector(".line");
      let myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "综合得分",
            "安全状况",
            "制度管理",
            // "标准化操作",
            "企业会议",
            "定期培训",
            "单位自查",
            "自查报告",
            "定期自检",
            // "原料采购",
            // "社会责任",
            "三类人签署",
            "日管控完成情况",
            "周排查完成情况",
            "月调度完成情况",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "综合得分",
            data: this.recordList.map((x) => x.total).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },
            type: "line",
            name: "安全状况",
            data: this.recordList.map((x) => x.superviseUnitScore).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "制度管理",
            data: this.recordList.map((x) => x.systemScore).reverse(),
          },

          // {
          //   itemStyle: { normal: { label: { show: true } } },

          //   type: "line",
          //   name: "标准化操作",
          //   data: this.recordList.map((x) => x.sopTotal).reverse(),
          // },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "企业会议",
            data: this.recordList.map((x) => x.jointConferenceScore).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "定期培训",
            data: this.recordList.map((x) => x.trainingScore).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "单位自查",
            data: this.recordList.map((x) => x.unitCheckResultScore).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "自查报告",
            data: this.recordList.map((x) => x.selfReportScore).reverse(),
          },

          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "定期自检",
            data: this.recordList.map((x) => x.quickCheckScore).reverse(),
          },


       {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "三类人签署",
            data: this.recordList.map((x) => x.signScore).reverse(),
          },
{
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "日管控完成情况",
            data: this.recordList.map((x) => x.dayScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "周排查完成情况",
            data: this.recordList.map((x) => x.weekScore).reverse(),
          },
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "月调度完成情况",
            data: this.recordList.map((x) => x.monthScore).reverse(),
          },
          // {
          //   itemStyle: { normal: { label: { show: true } } },

          //   type: "line",
          //   name: "原料采购",
          //   data: this.recordList.map((x) => x.purchaseTotal).reverse(),
          // },
          // {
          //   itemStyle: { normal: { label: { show: true } } },

          //   type: "line",
          //   name: "社会责任",
          //   data: this.recordList.map((x) => x.publicityTotal).reverse(),
          // },
        ],
        // this.recordList.map(x=>{})
      };
      myChart.setOption(option);
    },
    getList() {
      findLastByWorkstationId({
        params: {
          workstationId: sessionStorage.getItem("chainId"),
        },
      }).then((res) => {
        this.data = res.data;
        // findLastByWorkstationId
        // this.tableData = res.data.chainStoreScoreMiddleResponseList;
            // { name: "总部建立食品安全管理体系和管理制度", max: this.data.systemTotal },
            // { name: "定期召开食品安全相关会议", max: this.data.jointConferenceTotal },
            // // { name: "标准化操作", max: this.data.sopTotal },
            // { name: "定期开展食品安全培训", max: this.data.trainingTotal },
            // { name: "单位门店食品安全状况", max: this.data.superviseUnitTotal },
            // { name: "总部落实三类人三件事", max: this.data.threeTotal },
            // { name: "按要求进行自查报告", max: this.data.selfReportTotal },
            // { name: "总部定期开展自检", max: this.data.quickCheckTotal },
  //  完善管理体系、召开食安会议、定期开展培训、定期自检监测、门店食安状况、三类人三件事、开展自查报告
 this.tableData =[
  {
    name:"完善管理体系",
    max:this.data.systemTotal,
    value:this.data.systemScore,
  },
 {
    name:"召开食安会议",
    max:this.data.jointConferenceTotal,
    value:this.data.jointConferenceScore,
  }, {
    name:"定期开展培训",
    max:this.data.trainingTotal,
    value:this.data.trainingScore,
  },
  {
    name:"门店食安状况",
    max:this.data.superviseUnitTotal,
    value:this.data.superviseUnitScore,
  },
  {
    name:"三类人三件事",
    max:this.data.threeTotal,
    value:this.data.threeScore,
  },
  {
    name:"开展自查报告",
    max:this.data.selfReportTotal,
    value:this.data.selfReportScore,
  },{
    name:"定期自检监测",
    max:this.data.quickCheckTotal,
    value:this.data.quickCheckScore,
  },
 ]





        this.$nextTick(() => {
          this.meterInit();
          this.radarInit();
        });
      });
    },
    findListByConditionSafety() {
      findListByConditionScore({
        endDate: this.$moment().format("YYYY-MM-DD"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        sort: 1,
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        workstationId: sessionStorage.getItem("chainId"),
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
    view(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  // background-color: #fff;

  .title {
    font-size: 20px;
  }
  .main,
  .radar,
  .line {
    height: 320px;
    width: 100%;
  }
  .analysis {
    /deep/ .el-table--medium .el-table__cell {
      padding: 7px 0;
    }
  }
  /deep/ .el-icon-arrow-right {
    display: none;
  }
}
</style>